<!DOCTYPE html>
	<head>
		
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="assets/layui-v2.4.5/layui/css/layui.css" />
		<script src="assets/layui-v2.4.5/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="js/bootstarp-3.3.7/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="js/bootstarp-table-1.11.1/bootstrap-table.min.css" />
		<script src="js/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstarp-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstarp-table-1.11.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="js/bootstrap-table-export.js"></script>
		<script src="js/tableExport.min.js"></script>
		<script src="js/xlsx.core.min.js"></script>
		<script src="js/FileSaver.min.js"></script>
		
		
	</head>

	<body>
		<br />
		<form class="form-inline layui-form layui-form-pane">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label for="exampleInputEmail2" class="layui-form-label">药品分类：</label>
					<div class="layui-input-inline">
						<select id="medicines_class" name="medicines_class">
							<option value="">全部</option>
							<option value="中草药">中草药</option>
							<option value="中成药">中成药</option>
							<option value="西药">西药</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">

					<div class="layui-input-inline">
						<input type="date" name="create_time" id="create_time" value="" class="layui-input" />
					</div>
				</div>
				<div class="layui-inline">

					<div class="layui-input-inline">
						<input type="date" name="create_tim" id="create_tim" value=""  class="layui-input" />
					</div>
				</div>
				<div class="layui-inline">

					<div class="layui-input-inline">
						<button type="button" class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius" onclick="select()">查询</button>
					</div>
				</div>
			</div>
		</form>
		<br />

		<table height="75px" width="100%">
			<tr bgcolor="#47c6c6">
				<td rowspan="2" width="90px" align="center" >收支概括</td>
				<td align="center" height="30px" width="130px" id="zlr">0
				</td>
				<td align="center" height="30px" width="130px" id="pfzj">0
				</td>
				<td align="center" height="30px" width="130px" id="xszj">0
				</td>
				<td rowspan="2"></td>
			</tr>
			<tr bgcolor="#47c6c6">
				<td align="center">
					<hr width="100px" />总利润</td>
				<td align="center">
					<hr width="100px" />批发总价</td>
				<td align="center">
					<hr width="100px" />销售总价</td>
			</tr>
		</table>
		<br />
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
			<ul class="layui-tab-title">
				<li class="layui-this">处方药品明细</li>
				<li>处方药品排行</li>
			</ul>
			<div class="layui-tab-content" style="height: 100px;">
				<div class="layui-tab-item layui-show">
					<table id="table">
						
					</table>
				</div>
				<div class="layui-tab-item">
					<table id="tabl"></table>
				</div>
			</div>
		</div>

	</body>

</html>
<script type="text/javascript">
	layui.use(['laydate', 'form'], function() {
		var form = layui.form,
			layer = layui.layer,
			laydate = layui.laydate;

		laydate.render({
			elem: '#addtime'
		});

		laydate.render({
			elem: '#adddate'
		});

	})
	var zonglr = 0;
	var pifzj = 0;
	var xiaoszj = 0;
	
	layui.use('element', function() {
		var $ = layui.jquery,
			element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

	})
	$(function() {
		$.ajaxSetup({
					crossDomain: true,
					xhrFields: {
						withCredentials: true
					}
				});
		$('#table').bootstrapTable({
			url: "http://127.0.0.1:8090/getDrug",
			pagination: true,
			pageSize: 6,
			singleSelect: true,
			clickToSelect: true,
			queryParams: queryParams,
			columns: [{
				field: 'medicines_class',
				title: '药品分类',
				align: 'center'
			}, {
				field: 'name',
				title: '药品名称',
				align: 'center'
			}, {
				field: 'sun',
				title: '规格',
				align: 'center'
			}, {
				field: 'sum',
				title: '数量',
				align: 'center'
			}, {
				field: 'spr',
				title: '批发单价',
				align: 'center'
			}, {
				field: 'ptp',
				title: '销售单价',
				align: 'center'
			}, {
				field: 'ptta',
				title: '批发总价',
				align: 'center'
			}, {
				field: 'dhcosa',
				title: '销售总价',
				align: 'center'
			}, {
				field: 'aaptta',
				title: '利润',
				align: 'center'
			}]
		})
	})
	
	$.ajax({
		type:"post",
		url:"http://localhost:8090/getDrug",
		success:function(data){
			console.log(data)
			$.each(data, function(m,n) {
				zonglr = zonglr+parseInt(n.aaptta);
				pifzj = pifzj+parseInt(n.ptta);
				xiaoszj = xiaoszj+parseInt(n.dhcosa);
			});
			$('#zlr').html(zonglr);
			$('#pfzj').html(pifzj);
			$('#xszj').html(xiaoszj);
		}
	});
	

	$(function() {
		$('#tabl').bootstrapTable({
			url: "http://localhost:8090/rank",
			queryParams: queryParams,
			pagination: true,
			pageSize: 6,
			singleSelect: true,
			clickToSelect: true,
			columns: [{
				field: 'id',
				title: '排名',
				align: 'center'
			}, {
				field: 'medicines_class',
				title: '药品分类',
				align: 'center'
			}, {
				field: 'name',
				title: '药品名称',
				align: 'center'
			}, {
				field: 'sun',
				title: '规格',
				align: 'center'
			}, {
				field: 'sum',
				title: '数量',
				align: 'center'
			}, {
				field: 'dhcosa',
				title: '总价',
				align: 'center'
			}]
		})

	})

	function queryParams() {
		return {
			'medicines_class': $('#medicines_class').val(),
			'create_time': $('#create_time').val(),
			'create_tim': $('#create_tim').val(),
		}
	}

	function select() {
		$('#table').bootstrapTable('refresh');
		$('#tabl').bootstrapTable('refresh');
	}
</script>